<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>千锋教育大前端Vue教学</title>
  <style>
    .page { font-size: 20px; margin: 50px; }
  </style>
</head>
<body>
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <div id="home" class="page" style="color:blue">这是首页的内容</div>
  <div id="news" class="page" style="color:red;display: none;">这是新闻面的内容</div>
  <script>
    // 路由对象：对应关系; url路径->页面显示
    const routers = [{
      hash: '#home',
      show() {
        document.getElementById('home').style.display = '';
        document.getElementById('news').style.display = 'none';
      }
    }, {
      hash: '#news',
      show() {
        document.getElementById('home').style.display = 'none';
        document.getElementById('news').style.display = '';
      }
    }];
    function callback() {
      for (const router of routers) {
        if (router.hash == window.location.hash) {// 匹配哈希值 执行对应方法
          router.show();
        }
      }
    }
    window.addEventListener('hashchange', callback);  // 监听浏览器hash改变事件 
  </script>
</body>
</html>